Надеждно зареждане на ресурси в React: Овладяване на границите на грешките с Hooks

В съвременните уеб приложения асинхронното зареждане на ресурси е често срещана практика. Независимо дали става въпрос за извличане на данни от API, зареждане на изображения или импортиране на модули, справянето с потенциални грешки по време на зареждането на ресурси е от решаващо значение за гладкото потребителско изживяване. Границите на грешките (Error Boundaries) в React предоставят механизъм за улавяне на JavaScript грешки навсякъде в дървото на дъщерните им компоненти, регистриране на тези грешки и показване на резервен потребителски интерфейс (fallback UI), вместо да сриват цялото приложение. Тази статия разглежда как ефективно да използвате границите на грешките в комбинация с React Hooks за управление на грешки при зареждане на ресурси.

Разбиране на границите на грешките (Error Boundaries)

Преди React 16 необработените JavaScript грешки по време на рендирането на компоненти биха повредили вътрешното състояние на React и биха причинили загадъчни грешки при последващи рендирания. Границите на грешките решават този проблем, като действат като блокове за улавяне на всички грешки, които възникват в техните дъщерни компоненти. Те са React компоненти, които имплементират един или и двата от следните методи на жизнения цикъл:

• static getDerivedStateFromError(error): Този статичен метод се извиква, след като е възникнала грешка в дъщерен компонент. Той получава възникналата грешка като аргумент и връща стойност за актуализиране на състоянието на компонента.
• componentDidCatch(error, info): Този метод на жизнения цикъл се извиква, след като е възникнала грешка в дъщерен компонент. Той получава възникналата грешка като аргумент, както и обект, съдържащ информация за това кой компонент е предизвикал грешката. Можете да го използвате за регистриране на информация за грешката.

Важно е да се отбележи, че границите на грешките улавят грешки само във фазата на рендиране, в методите на жизнения цикъл и в конструкторите на цялото дърво под тях. Те не улавят грешки за:

• Обработващи функции на събития (event handlers) (научете повече в секцията по-долу)
• Асинхронен код (напр. setTimeout или requestAnimationFrame callbacks)
• Рендиране от страна на сървъра (server-side rendering)
• Грешки, възникнали в самата граница на грешките (а не в нейните дъщерни компоненти)

Граници на грешките и React Hooks: Мощна комбинация

Докато класовите компоненти традиционно се използваха за имплементиране на граници на грешките, React Hooks предлагат по-сбит и функционален подход. Можем да създадем преизползваем useErrorBoundary hook, който капсулира логиката за обработка на грешки и предоставя удобен начин за обвиване на компоненти, които могат да предизвикат грешки по време на зареждане на ресурси.

Създаване на персонализиран useErrorBoundary Hook

Ето пример за useErrorBoundary hook:

            import { useState, useCallback } from 'react';

function useErrorBoundary() {
  const [error, setError] = useState(null);

  const resetError = useCallback(() => {
    setError(null);
  }, []);

  const captureError = useCallback((e) => {
    setError(e);
  }, []);

  const ErrorBoundary = useCallback(({ children, fallback }) => {
    if (error) {
      return fallback ? fallback : 
An error occurred: {error.message || String(error)}
;
    }
    return children;
  }, [error]);

  return { ErrorBoundary, captureError, error, resetError };
}

export default useErrorBoundary;

            

              
                Copy
              
            
          

Обяснение:

• useState: Използваме useState за управление на състоянието на грешката. Първоначално той задава грешката на null.
• useCallback: Използваме useCallback, за да мемоизираме функциите resetError и captureError. Това е добра практика за предотвратяване на ненужни пререндирания, ако тези функции се предават като props.
• ErrorBoundary компонент: Това е функционален компонент, създаден с useCallback, който приема children и незадължителен fallback prop. Ако в състоянието съществува грешка, той рендира или предоставения fallback компонент, или съобщение за грешка по подразбиране. В противен случай рендира дъщерните компоненти (children). Това действа като нашата граница на грешките. Масивът на зависимостите `[error]` гарантира, че той ще се пререндира, когато състоянието на `error` се промени.
• captureError функция: Тази функция се използва за задаване на състоянието на грешката. Ще я извикате в try...catch блок при зареждане на ресурси.
• resetError функция: Тази функция изчиства състоянието на грешката, позволявайки на компонента да рендира отново своите дъщерни компоненти (потенциално опитвайки отново зареждането на ресурса).

Имплементиране на зареждане на ресурси с обработка на грешки

Сега, нека видим как да използваме този hook за справяне с грешки при зареждане на ресурси. Разгледайте компонент, който извлича потребителски данни от API:

            import React, { useState, useEffect } from 'react';
import useErrorBoundary from './useErrorBoundary';

function UserProfile({ userId }) {
  const [user, setUser] = useState(null);
  const { ErrorBoundary, captureError, error, resetError } = useErrorBoundary();

  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch(`https://api.example.com/users/${userId}`);
        if (!response.ok) {
          throw new Error(`HTTP error! status: ${response.status}`);
        }
        const data = await response.json();
        setUser(data);
      } catch (e) {
        captureError(e);
      }
    };

    fetchData();
  }, [userId, captureError]);

  if (error) {
    return (
      Failed to load user data. Retry